<template>
  <div class="container bg2 bg-cover" style="height: 1800rpx">
    <div class="title">
      <h2>引领行业“薪”风向<br />影视后期人才炙手可热</h2>
      <p class="f-title" style="font-size: 12px">
        数据来源：职友集 统计时间：2022/8/22<br />
        本数据系对影视相关岗位薪资整理，不作为效果承诺
      </p>
    </div>
    <ul class="money-list">
      <li class="item item-r">
        <div class="info">
          <h2>短视频剪辑师</h2>
          <p>
            · 平均工资: ¥11350 / 月<br />
            · 较去年，增长13.5%
          </p>
        </div>
      </li>
      <li class="item">
        <div class="info">
          <h2 style="padding-left: 0.8rem">虚拟视觉包装师</h2>
          <p style="text-align: right">
            平均工资: ¥13780 / 月 ·<br />
            较去年，增长16.7% ·
          </p>
        </div>
      </li>
      <li class="item item-r">
        <div class="info">
          <h2>视效设计师</h2>
          <p>
            · 平均工资: ¥11450 / 月<br />
            · 较去年，增长17.4%
          </p>
        </div>
      </li>
      <li class="item">
        <div class="info">
          <h2 style="padding-left: 0.8rem">数字城市建模师</h2>
          <p style="text-align: right">
            平均工资: ¥12720 / 月 ·<br />
            较去年，增长14.7% ·
          </p>
        </div>
      </li>
      <li class="item item-r">
        <div class="info">
          <h2>虚拟直播场景搭建</h2>
          <p>
            · 平均工资: ¥10315 / 月<br />
            · 较去年，增长16.5%
          </p>
        </div>
      </li>
    </ul>
    <div class="more-btn">更多职业优势</div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.bg-cover {
  background-size: 750rpx 1800rpx;
}
.money-list {
  padding: 0;
  width: 100%;
  padding: 0 20rpx;
  padding-bottom: 50rpx;
  box-sizing: border-box;
  li:nth-child(1) {
    background: url(@/assets/course/cs4-img1.png) no-repeat left center;
    background-size: 405rpx 238rpx;
  }
  li:nth-child(2) {
    background: url(@/assets/course/cs4-img2.png) no-repeat right center;
    background-size: 405rpx 238rpx;
  }
  li:nth-child(3) {
    background: url(@/assets/course/cs4-img3.png) no-repeat left center;
    background-size: 405rpx 238rpx;
  }
  li:nth-child(4) {
    background: url(@/assets/course/cs4-img4.png) no-repeat right center;
    background-size: 405rpx 238rpx;
  }
  li:nth-child(5) {
    background: url(@/assets/course/cs4-img5.png) no-repeat left center;
    background-size: 405rpx 238rpx;
  }
}

.item {
  margin-top: 15rpx;
  width: 730rpx;
  height: 238rpx;
  overflow: hidden;
  display: flex;
  justify-content: start;

  .info {
    width: 50%;
    h2 {
      margin-top: 40rpx;
      font-size: 38rpx;
      color: #feebde;
      line-height: 38rpx;
    }
    p {
      margin-left: 5rpx;
      padding-left: 15rpx;
      margin-top: 20rpx;
      width: 340rpx;
      font-size: 30rpx;
      line-height: 36rpx;
      color: #e8e8e8;
      border-left: 1px solid #e8e8e8;
    }
  }
}
.item-r {
  justify-content: flex-end;
}
</style>
